<template>
  <div :style="calcConSize">
    <div class="qyui-cell col bd" :style="calcPageSize">
      <div class="qyui-cell row">
        <div v-menus:right="menusOtions" style="position: relative;height:100%;width:100%;overflow:hidden">
          <ReportCord v-if="manager.bookCord!==null"></ReportCord>
          <template v-for="(item,index) in manager.Body.AllGridViews" :key="index">
            <ReportDataGridView :table-index="index"></ReportDataGridView>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ReportDataGridView from './ReportDataGridView.vue';
import ReportCord from './ReportCord.vue';

export default {
  components: { ReportDataGridView, ReportCord },
  inject: ['manager'],
  data() {
    return {
      menusOtions: {
        menus: [
          { label: '添加表', click: (a, $event) => { this.menuClick($event, 'addTable'); } },
          {
            label: '装订线',
            children: [
              { label: '添加', click: (a, $event) => { this.menuClick($event, 'addCord'); } },
              { label: '删除', click: (a, $event) => { this.menuClick($event, 'delCord'); } },
            ],
          },

        ],
        zIndex: 999,
        prevent: true,
      },
    };
  },
  computed: {
    // calcHeaderStyle() {
    //   return {
    //     height: this.manager.TopSection.Height + 'px',
    //   };
    // },
    // calcFooterStyle() {
    //   return {
    //     height: this.manager.BottomSection.Height + 'px',
    //   };
    // },
    calcConSize() {
      return {
        width: this.manager.Page.Width + 'px',
        height: '100%',
        'background-color': '#eee8aa',
      };
    },
    calcPageSize() {
      return {
        width: this.manager.Page.Width + 'px',
        height: this.manager.Page.Height + 'px',
        'background-color': '#fff',
      };
    },
  },
  methods: {
    menuClick($event, cmd) {
      if (cmd === 'addTable') {
        const cells = [];
        for (let y = 0; y < 5; y++) {
          for (let x = 0; x < 3; x++) {
            const obj = {
              // Height: 60,
              // Width: 60,
              RowIndex: y,
              ColumnIndex: x,
              StartCellRowIndex: y,
              StartCellColumnIndex: x,
              MaxRowIndex: y,
              MaxColumnIndex: x,
            };
            cells.push(this.manager.addNewCell(obj));
          }
        }
        const gridView = {
          ID: -1,
          Name: 'table' + this.manager.states.nextTableId++,
          dataSourceName: '',
          showType: 'Table',
          GridHidden: '',
          GridHiddenPsm: '',
          GridHiddenParam: '',
          Left: $event.offsetX,
          Top: $event.offsetY,
          ZIndex: 0,
          Type: 'Grid',
          Columns: [
            { ColumnIndex: 0, Width: 72 },
            { ColumnIndex: 1, Width: 72 },
            { ColumnIndex: 2, Width: 72 },
          ],
          Rows: [
            { RowIndex: 0, Type: 'Title', Height: 36 },
            { RowIndex: 1, Type: 'ColumnHeader', Height: 36 },
            { RowIndex: 2, Type: 'Detail', Height: 36 },
            { RowIndex: 3, Type: 'ColumnFooter', Height: 36 },
            { RowIndex: 4, Type: 'Summary', Height: 36 },
          ],
          Cells: cells,

        };
        this.manager.Body.AllGridViews.push(gridView);
      } else if (cmd === 'addCord') {
        // 判断是否已经有装订线
        const index = this.manager.Body.AllGridViews.findIndex(a => a.Name.indexOf('cord') > -1);
        if (index > -1) {
          this.$message({
            type: 'error',
            message: '已经存在装订线',
          });
          return;
        }
        const cells = [];
        for (let y = 0; y < 3; y++) {
          for (let x = 0; x < 2; x++) {
            const obj = {
              RowIndex: y,
              ColumnIndex: x,
              StartCellRowIndex: y,
              StartCellColumnIndex: x,
              MaxRowIndex: y,
              MaxColumnIndex: x,
            };
            if ((y === 0 || y === 2) && x === 0) {
              obj.BorderRightLineStyle = 'Dotted';
              obj.BorderRightWidth = '2';
            }
            if (y === 1 && x === 0) {
              obj.MaxColumnIndex = 1;
              obj.Text = "'装订线'";
              obj['writing-mode'] = 'tb-rl';
            }
            if (y === 1 && x === 1) {
              obj.StartCellColumnIndex = 0;
            }
            cells.push(this.manager.addNewCell(obj));
          }
        }
        const gridView = {
          ID: -1,
          Name: 'cord',
          dataSourceName: '',
          showType: 'CordL',
          GridHidden: '',
          GridHiddenPsm: '',
          GridHiddenParam: '',
          Left: 20,
          Top: 20,
          ZIndex: 0,
          Columns: [
            { ColumnIndex: 0, Width: 12 },
            { ColumnIndex: 1, Width: 12 },
          ],
          Rows: [
            { RowIndex: 0, Type: 'Title', Height: 201 },
            { RowIndex: 1, Type: 'Title', Height: 69 },
            { RowIndex: 2, Type: 'Title', Height: 201 },
          ],
          Cells: cells,
        };
        this.manager.bookCord = gridView;
      } else if (cmd === 'delCord') {
        this.manager.bookCord = null;
      }
    },
  },

};
</script>
<style>

</style>
